<template lang='pug'>
  Modal(v-model="modalShow" title="新建工作计划" width="800")
    Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="86")
      Row(type="flex" justify="start" :gutter="16")
        Col(span="24")
          .display-flex
            FormItem(label="开始:" prop="beginDate")
              DatePicker.input-has-border(:value="formValidate.beginDate" type="date" format="yyyy-MM-dd" @on-change="beginDateChange" style="width:200")
            FormItem(prop="beginTime" :label-width="15")
              TimePicker.input-has-border(:value="formValidate.beginTime" format="HH:mm" @on-change="beginTimeChange" placeholder="时间" style="width: 112px")
        Col(span="24")
          .display-flex
            FormItem(label="结束:" prop="endDate")
              DatePicker.input-has-border(:value="formValidate.endDate" type="date" format="yyyy-MM-dd" @on-change="endDateChange" style="width:200")
            FormItem(prop="endTime" :label-width="15")
              TimePicker.input-has-border(:value="formValidate.endTime" format="HH:mm" @on-change="endTimeChange" placeholder="时间" style="width: 112px")
        Col(span="12")
          FormItem(label="计划分类:" prop="planTypeId")
            Select.input-has-border(v-model="formValidate.planTypeId" placeholder="请选择") 
              Option(v-for="(item,index) in planClassifyList" :key="index" :value="item.value") {{item.text}}
        Col(span="12")
          FormItem(label="关联客户:")
            Select.input-has-border(v-model="formValidate.customerGUID" filterable placeholder="请选择")
              Option(v-for="(item,index) in customerList" :key="index" :value="item.id") {{item.name}}
        Col(span="24")
          FormItem(label="计划详情:" prop="content")
            Input.input-has-border(v-model="formValidate.content" type="textarea" placeholder="请输入" :rows="4")
    template(slot="footer")
      Button(@click="modalShow = false") 关闭
      Button(type="info" @click="handleSubmit('formValidate')") 添加计划
</template>

<script>
import WorkScheduleApi from '@/api/WorkSchedule.api.js'
export default {
  name:'',
  props:{
    planClassifyList: Array,
    customerList: Array
    // beginTime: String
  },
  data () {
    return {
      modalShow: false,
      formValidate: {
        beginDate: this.$moment(new Date()).format('YYYY-MM-DD'), // 开始日期
        beginTime: '', // 开始时间
        endDate: this.$moment(new Date()).format('YYYY-MM-DD'), // 结束日期
        endTime: '', // 结束时间
        type: 1, // 类型：1工作计划,2完成任务,3系统完成任务
        planTypeId: '', // 计划分类
        customerGUID: '', // 关联客户
        content: '' // 计划详情
      },
      ruleValidate: {
        beginTime: [
          { required: true, message: '时间不能为空' }
        ],
        endTime: [
          { required: true, message: '时间不能为空' }
        ],
        beginDate: [
          { required: true, message: '开始日期不能为空' }
        ],
        endDate: [
          { required: true, message: '结束日期不能为空' }
        ],
        planTypeId: [
          { required: true, message: '计划分类不能为空', trigger: 'change' }
        ],
        customerGUID: [
          { required: true, message: '关联客户不能为空', trigger: 'change' }
        ],
        content: [
          { required: true, message: '计划详情不能为空', trigger: 'change' }
        ]
      }
    }
  },

  components: {},

  computed: {
  },
  watch: {
    modalShow (val) {
      console.log(val)
      if (val) {
        let start = this.$moment(this.$moment(new Date()).format('YYYY-MM-DD HH:mm'))
        let remainder = 30 - (start.minute() % 30)
        let remainder_2 = 60 - (start.minute() % 30)
        this.formValidate.beginTime = this.$moment(start).add(remainder, "minutes").format("HH:mm")
        this.formValidate.endTime = this.$moment(start).add(remainder_2, "minutes").format("HH:mm")
      }
    }
  },

  beforeMount() {},

  mounted() {},

  methods: {
    show () {
      this.$refs['formValidate'].resetFields()
      this.modalShow = true
    },
    beginDateChange (val) {
      this.formValidate.beginDate = val
    },
    beginTimeChange (val) {
      this.formValidate.beginTime = val
      let dateTime = this.formValidate.beginDate + ' ' + this.formValidate.beginTime
      let start = this.$moment(dateTime)
      let time = this.$moment(start).add(30, "minutes").format("HH:mm")
      this.formValidate.endTime = time
    },
    endDateChange (val) {
      this.formValidate.endDate = val
    },
    endTimeChange (val) {
      this.formValidate.endTime = val
      // this.formValidate.endTime = this.endDate + ' ' + this.endTime
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.savePlan(name)
        } else {
          this.$Message.warning('有必填项未填!')
        }
      })
    },
    savePlan (name) {
      WorkScheduleApi.Save({
        beginTime: this.formValidate.beginDate + ' ' + this.formValidate.beginTime,
        endTime: this.formValidate.endDate + ' ' + this.formValidate.endTime,
        type: this.formValidate.type,
        planTypeId: this.formValidate.planTypeId,
        customerGUID: this.formValidate.customerGUID,
        content: this.formValidate.content
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
          let provisionalObj = Object.assign({}, this.formValidate)
          provisionalObj.planTypeId = ''
          provisionalObj.customerGUID = ''
          provisionalObj.content = ''
          this.$refs[name].resetFields()
          this.formValidate = Object.assign({}, provisionalObj)
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 
  }

}

</script>
<style lang='less' scoped>
</style>